import { BasicColumn } from '/@/components/Table';
import { FormSchema } from '/@/components/Table';
import { UploadTypeEnum } from '/@/components/Form/src/jeecg/components/JUpload';
import { render } from "/@/utils/common/renderUtils";
import { AutoComplete } from 'ant-design-vue';

//订单列表 - 状态转译
const statusFmt = ({text}: { text: any }) => {
  var value = '栏目', color = 'red';
  if (text == '0') {
    value = '产品';
    color = 'green';
  } 
 
  return render.renderTag(value, color)
}
export const columns: BasicColumn[] = [
  {
    title: '图片',
    dataIndex: 'pictureUrl',
    width: 150,
  },
  {
    title: '类型',
    dataIndex: 'linkMode',
    customRender: statusFmt,
    width: 150,
  },
  {
    title: '名称',
    dataIndex: 'goodsName',
    align: 'left',
    width: 300,
  },
  {
    title: '连接',
    dataIndex: 'linkUrl',
    align: 'left',
  },
  {
    title: '排序',
    dataIndex: 'sortNo',
    width: 100,
  },
];

export const searchFormSchema: FormSchema[] = [
  {
    label: '删除标志 true/false 删除/未删除',
    field: 'deleteFlag',
    component: 'Input'
  },
  {
    label: '佣金比例',
    field: 'commissionRate',
    component: 'InputNumber'
  },
];

export const formSchema: FormSchema[] = [
  // TODO 主键隐藏字段，目前写死为ID
  { label: '', field: 'id', component: 'Input', show: false },
  {
    label: '图片',
    field: 'pictureUrl',
    component: 'JUpload',
    componentProps: {
      fileType: UploadTypeEnum.image,
      maxCount: 1,
    },
    colProps: { span: 21 },
    required: true,
  },
  {
    label: '类型',
    field: 'linkMode',
    component: 'Select',
    colProps: { span: 22 },
    //填写组件的属性
    componentProps: {
      options: [
        { label: '产品', value: 0 },
        { label: '栏目', value: 1 },
      ],
    },
    //默认值
    defaultValue: 0,
    required: true,
  },
  { label: "栏目", field: "categoryId", component: 'ApiTreeSelect', required: true,
    ifShow: ({ values }) => {
      return (values.linkMode == '1');
    },
    colProps: {
      span: 22,
    },
    componentProps: {
      fieldNames: { children: 'children', label: 'name', key: 'id', value: 'id', url: 'url', selectable: 'selectable' },
      dropdownStyle: {
        //maxHeight: '50vh',
      },
      treeDefaultExpandAll:true,
      getPopupContainer: () => document.body,
    },
  },
  {
    label: '名称',
    field: 'goodsName',
    component: 'Input',
    colProps: { span: 22 },
    ifShow: ({ values }) => {
      return (values.linkMode == '0');
    },
    dynamicRules: ({ values }) => {
      return values.linkMode == 0 ? [{required: true, message: '请填写不能为空！'}] : [];
    },
    componentProps: {
      autocomplete: 'off'
    }
  },  
  {
    label: '链接',
    field: 'linkUrl',
    component: 'Input',
    ifShow: ({ values }) => {
      return (values.linkMode == '0');
    },
    colProps: { span: 22 },
    dynamicRules: ({ values }) => {
      return values.linkMode == 0 ? [{required: true, message: '请填写不能为空！'}] : [];
    },
    componentProps: {
      autocomplete: 'off'
    }
  },
  {
    label: '排序',
    field: 'sortNo',
    component: 'InputNumber',
    colProps: { span: 22 },
    required: true,
  },
  {
    label: '状态',
    field: 'deleteFlag',
    component: 'Switch',
    defaultValue: true,
    componentProps: {
      checkedChildren: '是',
      unCheckedChildren: '否',
    },
    colProps: { span: 22 }
  },
];
